<template>
  <ContentBox :has-corner="true" class="community-house-use">
    <ContentBoxTitle title="房屋使用情况" />
    <div class="community-house-use__content">
      <Pie
        :formatter="function (a) { return a.name + ' ' + a.value + '套(' + a.percent + '%)' }"
        style="padding-top: 0"
        circle1-radius="128"
        circle2-radius="144"
        circle3-radius="160"
        :list="list"
        :canvas-width="300"
        :canvas-height="220"
        pie-radius="50px"
      />
    </div>
  </ContentBox>
</template>

<script>
import ContentBox from '@/components/ContentBox'
import ContentBoxTitle from '@/components/ContentBoxTitle'
import Pie from '@/components/Pie/Index'
export default {
  name: 'CommunityHouseUse',
  components: {
    ContentBox,
    ContentBoxTitle,
    Pie
  },
  props: {
    list: {
      type: Array,
      default: () => []
    }
  }
}
</script>

<style lang="scss">
.community-house-use {
  width: $base * 320px;
  height: $base * 230px;
  .content-box-title__content {
    width: $base * 246px;
  }
  .community-house-use__content {
    margin-top: $base * -45px;
  }
  .content-box-title__content__body {
    img:nth-child(1) {
      margin-left: $base * -10px;
    }
    img:nth-child(3) {
      margin-right: $base * -10px;
    }
  }
}
</style>